<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>rem布局</title>
    <style>
        body,html,p,ul,li {
            padding: 0;
        }
        /* 通过CSS的媒体查询设置 html 字体大小(在不同的移动端屏幕宽度尺寸下,html的字体大小也不同) */
        /* 媒体查询以@media开头，然后后面可以跟上判断条件,比如 screen 表示屏幕设备,
            and 是并且的意思， */
        @media screen and (min-width: 320px) {
            html { font-size: 50px; } 
            /* 1rem == 50px; 2rem == 100px; */
        }
        @media screen and (min-width: 360px) {
            html { font-size: 56.25px; } 
            /* iphone6、7、8尺寸是 375px 在这个范围内 */
        }
        @media screen and (min-width: 400px) {
            html { font-size: 62.5px; } 
            /* iphone6 plus、7 plus、8 plus 尺寸是 414px 在这个范围内 */
        }
        @media screen and (min-width: 440px) {
            html { font-size: 68.75px; } 
        }
        @media screen and (min-width: 480px) {
            html { font-size: 75px; } 
        }
        @media screen and (min-width: 640px) {
            html { font-size: 100px; } 
        }
        /* 
            等比列缩放
            640/100 == 480/75 == 440/68.75 == 400/62.5 == 360/56.25 == 320/50 
         */
         /* 
            ============>>>>
            通过媒体查询 当屏幕尺寸慢慢变化时候，元素的尺寸不能很平滑的改变。因为设置的字体大小是有间隙的
            屏幕从 360px 慢慢变化到 399px 时候 元素尺寸是不变的

            怎么可以实现 只要屏幕尺寸改变了,元素尺寸就会改变呢？
            =====>>>通过js动态获设备的尺寸,按一定的比列设置 html 字体大小
          */

        .box {
            width: 2rem;
            height: 2rem;
            background-color: #F00;
        }
    </style>
</head>
<body onselectstart="return false">
    <div class="box">
        好好
    </div>

    
</body>
</html>